import { Card, Space, Table, Image, Descriptions, Button, Tag, Input } from 'antd';
import { useLocation } from 'react-router-dom'
import { useState, useEffect } from 'react'
import EditRemark from './refunddetails/EditRemark';
const { Column, ColumnGroup } = Table;
import { getRefundById, setRefundRes } from '../../../api/OrderApi'
import './css/RefundDetails.css'
import { getTime } from '@/utils/publicFun';
import myContext from '../../../utils/myContext'


interface DataType {
    key: React.Key;
    orderId: number;
    marketState: number
    pay_method: string;
    user_account: string;
    marketTime: string;
    reseonId: number;
    reasonApplication: string;//申请原因
    payMoney: number;
    orderTotal: number;
    reMeth: number;
    salesType: number;
    handlingRemark: string;//处理备注
    handlingTime: string;//处理时间
    marketNum:string;
    handlingProcessor:string
}

// const data: DataType[] = [
//     {
//         key: '1',
//         order_number: 2749274948,
//         order_status: '代付款',
//         pay_method: '未支付',
//         user_account: 'New York No',
//         submit_time: '2012-12-12 12:23:20',
//         order_source: 'App订单'
//     }
// ];
export default function OrderSet() {

    const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false)
    const [data, setData] = useState<DataType[]>([])

    // 路由接受参数
    const locatioin = useLocation()
    // 解构出state
    const { state } = locatioin
    console.log('state111', state);
    // setData({orderId:1})
    // console.log('datavvvvv',data);


    // 点击同意退款
    const agreeHandle = () => {
        console.log('点击了同意退款');
        setRefundRes({
            orderId: orderId,
            handlingOpinions: 2,
            handlingProcessor: JSON.parse(sessionStorage.getItem('userInfo') as string).emplName,
            handlingTime: getTime()
            // handlingRemark:'hahahah同意了'
        }).then(res => {
            console.log('同意退款', res);

        }).catch(err => {
            console.log('err34343434', err);

        })

    }

    // 点击拒绝退款
    console.log(sessionStorage.getItem('userInfo'))
    const diaAgreeHandle = () => {
        console.log('点击了拒绝退款');
        
        setRefundRes({
            orderId: orderId,
            handlingOpinions: 3,
            handlingProcessor: JSON.parse(sessionStorage.getItem('userInfo') as string).emplName, //
            // handlingRemark:'hahahah同意了'
        }).then(res => {
            console.log('同意退款', res);

        }).catch(err => {
            console.log('err34343434', err);

        })
    }

    // 点击修改处理备注
    const updateRemark = () => {
        console.log('点击了修改备注');
        setIsEditModalOpen(true)
    }


    // 关闭修改备注的弹框
    const close = () => {
        setIsEditModalOpen(false)
    }

    useEffect(() => {
        getDetail()
    }, [])
    //发起首次请求的函数
    const getDetail = () => {
        getRefundById({
            orderId: state
        }).then(res => {
            console.log('详情', res.data);
            // let arr=[]
            // arr.push(res.data)
            setData([res.data])
            // setData(arr)

        }).catch(err => {
            console.log('err99999990', err);

        })
    }

    console.log('data', data);
    let orderId = { ...data[0] }.orderId;
    let marketNum = { ...data[0] }.marketNum;
    let marketState = { ...data[0] }.marketState;
    let marketTime = { ...data[0] }.marketTime;
    let reseonId = { ...data[0] }.reseonId;
    let payMoney = { ...data[0] }.payMoney;
    let orderTotal = { ...data[0] }.orderTotal;
    let reMeth = { ...data[0] }.reMeth;
    let salesType = { ...data[0] }.salesType;
    let reasonApplication = { ...data[0] }.reasonApplication;
    let handlingRemark = { ...data[0] }.handlingRemark;
    let handlingTime = { ...data[0] }.handlingTime;
    let handlingProcessor = { ...data[0] }.handlingProcessor;

    // 判断当前退款处于什么状态，如果是待处理，底部就渲染同意退款和拒绝退款按钮  如果是已经处理就渲染修改备注按钮
    let oDiv = null;
    let DealInfo = null;
    if (marketState == 1) {
        console.log('待处理申请');

        oDiv = <Space className='btns'>
            <Button type="primary" onClick={agreeHandle}>同意退款</Button>
            <Button danger type="primary" onClick={diaAgreeHandle}>拒绝退款</Button>
        </Space>

        DealInfo = <div className="deal_info">
            <Descriptions
                labelStyle={{ color: 'black', width: '200px', backgroundColor: '#F5FDFF', textAlign: 'center' }}
                // title="Responsive Descriptions"
                column={1}
                bordered
                size='small'
            >
                <Descriptions.Item label="处理备注">
                    <Input placeholder="请输入备注" />
                </Descriptions.Item>
            </Descriptions>
        </div>
    } else if (marketState == 2) {
        console.log('已处理申请');

        oDiv = <Space className='btns'>
            <Button type='primary' onClick={() => updateRemark()}>修改处理备注</Button>
        </Space>
        DealInfo = <div className="deal_info">
            <Descriptions
                labelStyle={{ color: 'black', width: '200px', backgroundColor: '#F5FDFF', textAlign: 'center' }}
                // title="Responsive Descriptions"
                column={1}
                bordered
                size='small'
            >
                <Descriptions.Item label="处理备注">{handlingRemark}</Descriptions.Item>
                <Descriptions.Item label="处理人">{handlingProcessor}</Descriptions.Item>
                <Descriptions.Item label="处理时间">{handlingTime}</Descriptions.Item>
            </Descriptions>
        </div>
    }

    return (
        // 订单详情/
        <div className='orderdetails'>
            <myContext.Provider value={{ getDetail }}>
                <p className='head'>退款详情</p>
                <Card title="退款申请详情" type="inner" className='detail_content'>

                    {/* 退款描述 */}


                    {/* 订单信息 */}
                    <div className="order_info">
                        <Descriptions
                            labelStyle={{ color: 'black', width: '200px', backgroundColor: '#F5FDFF', textAlign: 'center' }}
                            // title="Responsive Descriptions"
                            column={1}
                            bordered
                            size='small'
                        // column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
                        >
                            <Descriptions.Item label="订单编号">{orderId}</Descriptions.Item>
                            <Descriptions.Item label="申请状态">{
                                marketState == 1 ? <Tag color="#f50">待处理</Tag> : marketState == 2 ? <Tag color="#2db7f5">已处理</Tag> : <Tag color="#87d068">已拒绝</Tag>
                            }</Descriptions.Item>
                            <Descriptions.Item label="申请时间">{marketTime}</Descriptions.Item>
                            <Descriptions.Item label="用户账号">{marketNum}</Descriptions.Item>
                        </Descriptions>
                    </div>
                    {/* 收货人信息 */}
                    <div className="addressee_info">
                        <Descriptions
                            labelStyle={{ color: 'black', width: '200px', backgroundColor: '#F5FDFF', textAlign: 'center' }}
                            // title="Responsive Descriptions"
                            column={1}
                            bordered
                            size='small'
                        >
                            <Descriptions.Item label="订单金额">
                                <Button type="link">{payMoney}</Button>
                            </Descriptions.Item>
                            <Descriptions.Item label="确认金额">
                                <Button type="link">{orderTotal}</Button>
                            </Descriptions.Item>
                            <Descriptions.Item label="退款方式">
                                {reMeth == 1 ? '微信' : '支付宝'}
                            </Descriptions.Item>
                            <Descriptions.Item label="售后类型">
                                {
                                    salesType == 1 ? <Tag color="#EF7C15">退款</Tag> : salesType == 2 ? <Tag color="#2CC359">退货</Tag> : <Tag color="#F9713E">退款</Tag>
                                }
                            </Descriptions.Item>
                            <Descriptions.Item label="申请原因">{reasonApplication}</Descriptions.Item>
                            {/* <Descriptions.Item label="处理意见">{state[0].user_account}</Descriptions.Item> */}
                        </Descriptions>
                    </div>

                    {/* 处理信息 */}
                    {DealInfo}

                    {/* 底部按钮 */}
                    <div className="bottom_box">
                        {/* 动态渲染的结构 */}
                        {oDiv}
                    </div>
                </Card>

                {/* 修改备注的弹框 */}
                <EditRemark isEditModalOpen={isEditModalOpen} close={close} orderId={orderId} initRemark={handlingRemark}></EditRemark>
            </myContext.Provider>
        </div>
    )
}